<template>
  <div>
    <photo-view :list="list" @close="close" />
    <el-scrollbar :height="height" ref="scrollbarRef">
      <el-form :model="form">
        <el-row style="margin-bottom: 5px">
          <el-col :span="22">
            <p class="pinformation">精密度与准确度描述</p>
          </el-col>
        </el-row>
        <div style="font-size: 14px; margin-left: 10px; margin-bottom: 10px">
          {{ form.accuracyDesc || "/" }}
        </div>
        <el-row style="margin-bottom: 5px; margin-top: 5px">
          <p class="pinformation">精密度与准确度截图</p>
          <p class="totalStyle">共 {{ form.accuracyFileList.length }} 条数据</p>
          <el-table
            class="business"
            ref="zqdTableRef"
            :data="form.accuracyFileList"
            border
          >
            <el-table-column
              label="截图编号"
              align="center"
              prop="fileCode"
              width="220"
            />
            <el-table-column label="截图名称" align="center">
              <template #default="scope">
                <span
                  @click="list = scope.row.fileList"
                  class="fileNameHover"
                  >{{ scope.row.fileMc }}</span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <p class="pinformation">方法中的备注</p>
        <span
          class="fileNameHover"
          style="margin-left: 10px"
          v-if="form.fileList.length"
          @click="list = form.fileList"
          >{{ form.fileList[0].fileName }}</span
        >
        <span v-else style="margin-left: 10px">/</span>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script setup>
import useMethodStore from "@/store/modules/method";

const methodStore = useMethodStore();
const methodId = computed(() => methodStore.methodId);
const accuracyForm = computed(() => methodStore.accuracyForm);

const { proxy } = getCurrentInstance();
const title = ref("");
const open = ref(false);
const disabled = ref(false);
const data = reactive({
  form: { accuracyFileList: [], fileList: [] },
});
const { form } = toRefs(data);

watch(accuracyForm, () => {
  form.value = accuracyForm.value;
});

const height = ref();

function getHeight() {
  nextTick(() => {
    height.value = proxy.getSubFileHeight(proxy, "scrollbarRef");
  });
}

const list = ref([]);
function close() {
  list.value = [];
}

onMounted(() => {
  nextTick(function () {
    getHeight();
    window.addEventListener("resize", getHeight);
  });
});

onUpdated(() => {
  nextTick(() => {
    getHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getHeight);
});
</script>
